<template>
    <Row>
        <Col span="22" offset="1">
            <Form ref="Bank" :model="Bank" :rules="ruleValidate" :label-width="120" :style="{marginTop: '30px'}">
                <Row>
                    <Col span="10" offset="2">
                        <FormItem label="银行编码">
                            <Input v-model.trim="Bank.NumCode" readonly placeholder="银行编码由系统自动生成" ></Input>
                        </FormItem>
                    </Col>
                </Row>
                
                <Divider orientation="left">银行基本信息</Divider>
                <!-- <Row>
                    <Col span="10" offset="2">
                        <FormItem label="省份" prop="Province">
                            <Select v-model.trim="Bank.Province" :loading="ProvinceStatus" :remote-method="SelectProvince" @on-open-change="ProvinceChanged" filterable clearable placeholder="请选择省份">
                                <Option v-for="item in Province" :value=item.value :key="item.Id">{{ item.label }}</Option>
                            </Select>
                        </FormItem>
                    </Col>
                    <Col span="10" >
                        <FormItem label="城市" prop="City">
                            <Select v-model.trim="Bank.City" :loading="CityStatus" :remote-method="SelectCity" @on-open-change="CityChanged" filterable clearable placeholder="请选择城市">
                                <Option v-for="item in City" :value=item.value :key="item.Id">{{ item.label }}</Option>
                            </Select>
                        </FormItem>
                    </Col>
                </Row> -->
                <!-- <Row>
                    <Col span="10" offset="2">
                        <FormItem label="市（县）、区"  prop="Zone">
                            <Select v-model.trim="Bank.Zone" :loading="ZoneStatus" :remote-method="SelectZone" @on-open-change="ZoneChanged" filterable clearable placeholder="请选择市（县）、区">
                                <Option v-for="item in Zone" :value=item.value :key="item.Id">{{ item.label }}</Option>
                            </Select>
                        </FormItem>
                    </Col>
                </Row> -->
                <Row>
                    <Col span="20" offset="2">
                        <FormItem label="银行名称" prop="Name">
                            <Input  v-model.trim="Bank.Name" placeholder="例如：中国银行上海分行" ></Input>
                        </FormItem>
                    </Col>
                </Row>
                <Row>
                    <Col span="10" offset="2">
                        <FormItem label="银行账号" prop="Account">
                            <Input v-model.trim="Bank.Account" placeholder="例如：620000xxxxxxxxxx7843"></Input>
                        </FormItem>
                    </Col>
                    <Col span="10" >
                        <FormItem label="账户尾号">
                            <Input v-model.trim="AccountTail" readonly placeholder="填写银行账户后自动计算取最后四位，例如：7843" ></Input>
                        </FormItem>
                    </Col>
                </Row>
                <Row>
                    <Col span="10" offset="2">
                        <FormItem label="账户性质"  prop="AccountType">
                            <!-- <Input v-model.trim="Bank.AccountType" placeholder="例如：直营账户、一般账户" ></Input> -->
                            <Select v-model.trim="Bank.AccountType" filterable allow-create @on-create="handleCreateAccountType" >
                                <Option v-for="item in AccountTypes" :value=item.value :key="item.value">{{ item.label }}</Option>
                            </Select>
                        </FormItem>
                    </Col>
                    <Col span="10" >
                        <FormItem label="所属分公司" prop="Company">
                            <Select v-model.trim="Bank.Company" clearable filterable placeholder="请选择分公司！">
                                <Option v-for="item in Companys" :value=item.value :key="item.value">{{ item.label }}</Option>
                            </Select>
                        </FormItem>
                    </Col>
                </Row>
                <Divider orientation="left">银行账户信息</Divider>
                <Row>
                    <Col span="10" offset="2">
                        <FormItem label="期初余额" prop="BeginBalance">
                            <Input v-model.number="Bank.BeginBalance" placeholder="例如：10000.00" >
                                <span slot="suffix"><i>元</i ></span>
                                <Icon type="logo-yen" slot="prefix" />
                            </Input>
                        </FormItem>
                    </Col>
                    <Col span="10" >
                        <FormItem label="期末余额" prop="EndBalance">
                            <Input v-model.number="Bank.EndBalance" readonly placeholder="期末余额=期初余额+本期收入-本期支出" >
                                <span slot="suffix"><i>元</i ></span>
                                <Icon type="logo-yen" slot="prefix" />
                            </Input>
                        </FormItem>
                    </Col>
                </Row>
                <Row>
                    <Col span="10" offset="2">
                        <FormItem label="期初商票" prop="BeginCommercialTicket">
                            <Input v-model.number="Bank.BeginCommercialTicket" placeholder="例如：10000.00" >
                                <span slot="suffix"><i>元</i ></span>
                                <Icon type="logo-yen" slot="prefix" />
                            </Input>
                        </FormItem>
                    </Col>
                    <Col span="10" >
                        <FormItem label="期末商票" prop="EndCommercialTicket">
                            <Input v-model.number="Bank.EndCommercialTicket" placeholder="期末余额=期初余额+本期收入-本期支出" >
                                <span slot="suffix"><i>元</i ></span>
                                <Icon type="logo-yen" slot="prefix" />
                            </Input>
                        </FormItem>
                    </Col>
                </Row>
                <Row>
                    <Col span="10" offset="2">
                        <FormItem label="冻结资金" prop="FreezeMoney">
                            <Input v-model.number="Bank.FreezeMoney" placeholder="实际被法院冻结的资金" >
                                <span slot="suffix"><i>元</i ></span>
                                <Icon type="logo-yen" slot="prefix" />
                            </Input>
                        </FormItem>
                    </Col>
                    <Col span="10" >
                        <FormItem label="可用余额" prop="FlowBalance">
                            <Input v-model.number="Bank.FlowBalance" readonly placeholder="可用余额=期末余额-冻结资金" >
                                <span slot="suffix"><i>元</i ></span>
                                <Icon type="logo-yen" slot="prefix" />
                            </Input>
                        </FormItem>
                    </Col>
                </Row>
                <Divider orientation="left">其他信息</Divider>
                <Row>
                    <Col span="10" offset="2">
                        <FormItem label="启用标记">
                            <Select v-model="Bank.IsUsed" >
                                <Option v-for="item in IsUsed" :value=item.value :key="item.label">{{ item.label }}</Option>
                            </Select>
                        </FormItem>
                    </Col>
                    <Col span="10" >
                        <FormItem label="创建时间">
                            <DatePicker v-model="Bank.CreateTime" type="date" placeholder="请选择日期" format="yyyy年MM月dd日 HH时mm分ss秒" readonly style="width:100%"></DatePicker>
                        </FormItem>
                    </Col>
                </Row>
                <Row>
                    <Col span="20" offset="2" style="text-align:center;margin-top:58px">
                        <Button type="primary" @click="Submit('Bank')">提交</Button>
                        <Button @click="Reset('Bank')" style="margin-left: 108px">重置</Button>
                    </Col>
                </Row>
            </Form>
        </Col>
    </Row>
</template>
<script>
import { mapState } from "vuex";
import { CreateCode,GetOne,Create,Update,LoadCompany,LoadBankType,CreateBankType } from '@/axios/api/BankAPI'
import { GetProvinceList,GetCityList,GetZoneList } from '@/axios/api/AdministrativeAPI'

export default {
    computed:{
        ...mapState('bank',[
            'currentBankID',
            'pageIndex',
            'pageSize',
        ])
    },
    components: {
        
    },
    mounted: function(){
        //console.log(this.currentBankID)
        if(this.currentBankID != ''){
            this.$Spin.show();
        }
        setTimeout(() => {
            this.$Spin.hide();
        }, 1000);

        if(this.currentBankID != ''){
            GetOne(this.currentBankID).then(res => {
                this.Bank.Id = res.Id;
                this.Bank.Num = res.Num;
                this.Bank.NumCode = res.NumCode;
                this.Bank.Province = res.Province;
                this.Bank.City = res.City;
                this.Bank.Zone = res.Zone;
                this.Bank.Company = res.Company;
                this.Bank.Name = res.Name;
                this.Bank.Account = res.Account;
                this.Bank.AccountType = res.AccountType;
                this.Bank.SettlementBankId = res.SettlementBankId;
                this.Bank.SettlementPeriod = res.SettlementPeriod;
                this.Bank.BeginTime = res.BeginTime;
                this.Bank.EndTime = res.EndTime;
                this.Bank.BeginBalance = res.BeginBalance;
                this.Bank.EndBalance = res.EndBalance;
                this.Bank.BeginCommercialTicket = res.BeginCommercialTicket;
                this.Bank.EndCommercialTicket = res.EndCommercialTicket;
                this.Bank.FreezeMoney = res.FreezeMoney;
                this.Bank.FlowBalance = res.FlowBalance;
                this.Bank.IsSettlement = res.IsSettlement;
                this.Bank.IsUsed = res.IsUsed;
                this.Bank.CreateTime = res.CreateTime;
            });
        }
        else{
            CreateCode().then(res => {
                this.Bank.NumCode = res.toString();
            })
        }

        //获取公司列表
        LoadCompany().then(res => {
            const list = res.map(item => {
                return {
                    value: item.Id.toString(),
                    label: item.Name,
                    Id: item.Id
                };
            });
            this.Companys = list;
        })

        //获取银行类型
        LoadBankType().then(res => {
            const list = res.map(item => {
                return {
                    value: item.Code.toString(),
                    label: item.Name,
                    Id: item.Id
                };
            });
            this.AccountTypes = list;
        })

        //加载省、市、县
        setTimeout(() => {
            GetProvinceList().then(res => {
                const list = res.map(item => {
                    return {
                        value: item.Code,
                        label: item.Name,
                        Id: item.Id
                    };
                });
                this.Province = list;

                setTimeout(() => {
                    GetCityList(this.Bank.Province).then(res => {
                        const list = res.map(item => {
                            return {
                                value: item.Code,
                                label: item.Name,
                                Id: item.Id
                            };
                        });
                        this.City = list;

                        setTimeout(() => {
                            GetZoneList(this.Bank.City).then(res => {
                                    const list = res.map(item => {
                                        return {
                                            value: item.Code,
                                            label: item.Name,
                                            Id: item.Id
                                        };
                                    });
                                    this.Zone = list;
                                })
                            }, 50);
                        })
                }, 50);
            })
        }, 50);
    },
    data () {
        return {
            Bank: {
                Id: '00000000-0000-0000-0000-000000000000',
                Num: 1,
                NumCode: '',
                Province: '',
                City: '',
                Zone: '',
                Company: '',
                Name: '',
                Account: '',
                AccountType: '',
                SettlementBankId: '00000000-0000-0000-0000-000000000000',
                SettlementPeriod: 0,
                BeginTime: new Date(),
                EndTime: new Date(),
                BeginBalance: 0.0,
                EndBalance: 0.0,
                BeginCommercialTicket: 0.0,
                EndCommercialTicket: 0.0,
                FreezeMoney: 0.0,
                FlowBalance: 0.0,
                IsSettlement: false,
                IsUsed: 1 ,
                CreateTime: new Date()
            },
            ruleValidate: {
                Name: [{ required: true, message: '银行名称为必填项！', trigger: 'blur'  }],
                Account: [{ required: true, message: '银行账户为必填项！', trigger: 'blur'  }],
                Province: [{ required: true, message: '省份为必填项！', trigger: 'blur'  }],
                City: [{ required: true, message: '地级市为必填项！', trigger: 'blur'  }],
                Zone: [{ required: true, message: '县级市为必填项！', trigger: 'blur'  }],
                Company: [{  required: true, message: '所属分公司为必填项！', trigger: 'blur'  }],
                AccountType: [{ required: true, message: '账户类型为必填项！', trigger: 'blur'  }],
                BeginBalance: [{ type: 'number', message: '只能输入数字', trigger: 'blur' }],
                EndBalance: [{ type: 'number', message: '只能输入数字', trigger: 'blur' }],
                FreezeMoney: [{ type: 'number', message: '只能输入数字', trigger: 'blur' }],
                FlowBalance: [{ type: 'number', message: '只能输入数字', trigger: 'blur' }]
            },
            IsUsed:[
                {
                    value: 1,
                    label: "启用"
                },
                {
                    value: 0,
                    label: "禁用"
                }
            ],
            AccountTail: '',
            AccountTypes: [],
            Companys:[],
            callmodal: "bank-sheet",
            Province:[],
            City:[],
            Zone:[],
            ProvinceStatus: false,
            CityStatus: false,
            ZoneStatus: false
        }
    },
    watch: {
        'Bank.Account'(value){
            if(value != '' && value != null){
                this.AccountTail = value.substr(value.length-4,4);
            }
        },
        'Bank.BeginBalance'(value){
            if(value != '' && value != null){
                this.EndBalance = value;
                this.FlowBalance = this.EndBalance - this.FreezeMoney;
            }
        },
        'Bank.FreezeMoney'(value){
            if(value != '' && value != null){
                this.EndBalance = this.BeginBalance;
                this.FlowBalance = this.EndBalance - value;
            }
        },
    },
    methods: {
        Submit (name){
            //this.$Message.success('按了OK键');
             this.$refs[name].validate((valid) => {
                if (valid) {
                    if(this.Bank.Id == '00000000-0000-0000-0000-000000000000'){
                        this.$Message.success('校验通过!');
                        Create(this.Bank).then(res => {
                            if(res > 0){

                                setTimeout(() => {
                                    this.$store.dispatch('bank/UpdateTableAsync',{
                                        PageIndex: this.pageIndex,
                                        PageSize: this.pageSize
                                    });

                                    this.$Notice.success({
                                        title: '操作提示',
                                        desc: '保存成功！ '
                                    });
                                }, 1000)
                               
                            }
                            else{
                                this.$Notice.error({
                                    title: '操作提示',
                                    desc: '保存失败！ '
                                });
                            }
                        }).catch(err =>{
                            this.$Notice.error({
                                title: '操作提示',
                                desc: '保存失败：' + err + '!'
                            });
                        })
                        
                    }
                    else{
                        this.$Message.success('校验通过!');
                        
                        Update(this.Bank).then(res => {
                            if(res > 0){
                                setTimeout(() => {
                                    this.$store.dispatch('bank/UpdateTableAsync',{
                                        PageIndex: this.pageIndex,
                                        PageSize: this.pageSize
                                    });

                                     this.$Notice.success({
                                        title: '操作提示',
                                        desc: '更新成功！'
                                    });
                                }, 1000)
                            }
                            else{
                                this.$Notice.success({
                                    title: '操作提示',
                                    desc: '更新失败！'
                                });
                            }
                        }).catch(err =>{
                            this.$Notice.error({
                                title: '操作提示',
                                desc: '更新失败：' + err.data + '!'
                            });
                        })
                    }
                    this.ChangeModal();
                } else {
                    this.$Message.error('校验失败!');
                    //this.ChangeModal('Bank');
                }
            })
            
        },
        Reset (name){
            this.$refs[name].resetFields();
        },
        ChangeModal (){
            //this.$refs[name].resetFields();
            this.$store.commit('bank/CHANGE_MODAL');
            this.$router.push('/funds/Bank')
        },
        handleCreateAccountType(val){

            var BankType = {
                Code: (this.AccountTypes.length + 1).toString(),
                Name: val,
                Id: '00000000-0000-0000-0000-000000000000'
            };
            
            CreateBankType(BankType).then(res => {
                if(res > 0){
                    this.AccountTypes.push({
                        value: BankType.Code,
                        label: BankType.Name,
                        Id: BankType.Id
                    });
                    this.AccountType = BankType.Code;
                }
            })
            
        },
        SelectCompany (query){
            if(query != ''){
                setTimeout(() => {
                    /* GetCompanyList().then(res => {
                        const list = res.map(item => {
                            return {
                                value: item.Code,
                                label: item.Name,
                                Id: item.Id
                            };
                        });
                        this.Companys = list.filter(item => item.label.indexOf(query) > -1);
                    }) */
                }, 200);
            }
        },
        CompanyChanged(IsOpen){
            if(IsOpen){
                /* GetCompanyList().then(res => {
                    const list = res.map(item => {
                        return {
                            value: item.Code,
                            label: item.Name,
                            Id: item.Id
                        };
                    });
                    this.Companys = list;
                }) */
            }
            
        },
        SelectProvince (query){
            if(query != ''){
                this.ProvinceStatus = true;
                setTimeout(() => {
                    this.ProvinceStatus = false;
                    GetProvinceList().then(res => {
                        const list = res.map(item => {
                            return {
                                value: item.Code,
                                label: item.Name,
                                Id: item.Id
                            };
                        });
                        this.Province = list.filter(item => item.label.indexOf(query) > -1);
                    })
                }, 200);
            }
        },
        ProvinceChanged(IsOpen){
            if(IsOpen){
                GetProvinceList().then(res => {
                    const list = res.map(item => {
                        return {
                            value: item.Code,
                            label: item.Name,
                            Id: item.Id
                        };
                    });
                    this.Province = list;
                })
                this.Bank.City = '';
                this.Bank.Zone = '';
            }
            
        },
        SelectCity (query){
            if(query !== ''){
                this.CityStatus = true;
                setTimeout(() => {
                    this.CityStatus = false;
                    GetCityList(this.Bank.Province).then(res => {
                        const list = res.map(item => {
                            return {
                                value: item.Code,
                                label: item.Name,
                                Id: item.Id
                            };
                        });
                        this.City = list.filter(item => item.label.indexOf(query) > -1);
                    })
                }, 200);
            }
        },
        CityChanged(IsOpen){
            if(IsOpen){
                GetCityList(this.Bank.Province).then(res => {
                    const list = res.map(item => {
                        return {
                            value: item.Code,
                            label: item.Name,
                            Id: item.Id
                        };
                    });
                    this.City = list;
                })
                this.Bank.Zone = '';
            }
        },
        SelectZone (query){
            if(query !== ''){
                this.ZoneStatus = true;
                setTimeout(() => {
                    this.ZoneStatus = false;
                    GetZoneList(this.Bank.City).then(res => {
                        const list = res.map(item => {
                            return {
                                value: item.Code,
                                label: item.Name,
                                Id: item.Id
                            };
                        });
                        this.Zone = list.filter(item => item.label.indexOf(query) > -1);
                    })
                }, 200);
            }
        },
        ZoneChanged(){
            GetZoneList(this.Bank.City).then(res => {
                const list = res.map(item => {
                    return {
                        value: item.Code,
                        label: item.Name,
                        Id: item.Id
                    };
                });
                this.Zone = list;
            })
        }
    }
}
</script>
